body{
    margin:0;
    padding:0;
}
#head{
    height:56px;
    background: #FFFFFF;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);
}
.back {
    width:56px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #1563D1;
    line-height: 56px;
    text-align: center
}
.sceneManage {
    width:112px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #FFFFFF;
    line-height: 56px;
    text-align: center
}
.sceneManage .sceneManageFonts{
    display: inline-block;
    font-family: PingFangSC-Regular;
    vertical-align: middle;/*设置该元素在父元素中的位置*/
    font-size: 16px;
    color: #000000;
}
.sceneManage:hover {
    background: #F0F0F0;
}
.sceneManage:hover .sceneManageFonts{
    color: #1563D1;
}
.sceneNavigate {
    width:112px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #FFFFFF;
    line-height: 56px;
    text-align: center
}
.sceneNavigate .sceneNavigateFonts{
    display: inline-block;
    font-family: PingFangSC-Regular;
    vertical-align: middle;/*设置该元素在父元素中的位置*/
    font-size: 16px;
    color: #000000;
}
.sceneNavigate:hover {
    background: #F0F0F0;
}
.sceneNavigate:hover .sceneNavigateFonts{
    color: #1563D1;
}
.sceneManage.active {
    width:112px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #F0F0F0;
    line-height: 56px;
    text-align: center
}
.sceneManage.active .sceneManageFonts {
    color: #1563D1;
}
.sceneNavigate.active {
    width:112px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #F0F0F0;
    line-height: 56px;
    text-align: center
}
.sceneNavigate.active .sceneNavigateFonts {
    color: #1563D1;
}
#content{
    width:100%;
    height:calc(100% - 56px);
    margin:0;
}

#leftBar{
    position: absolute;
    width:56px;
    height:calc(100% - 56px);
    background: #FFFFFF;
    z-index: 14;
    display:none
}
#left-scene{
    width:56px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #ffffff;
    line-height: 56px;
}
#left-scene:hover {
    background: #F0F0F0;
}
#left-scene.active {
    width:56px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #F0F0F0;
    line-height: 56px;
}

#left-layer{
    width:56px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #ffffff;
    line-height: 56px;
}
#left-layer:hover {
    background: #F0F0F0;
}
#left-layer.active {
    width:56px;
    height:56px;
    float:left;
    opacity: 100%;
    background: #F0F0F0;
    line-height: 56px;
}
#layerContent{
    position: absolute;
    width:100%;
    height:calc(100% - 56px);
}
#layer {
    position: absolute;
    top:56px;
    width:256px;
    height:calc(100% - 56px);
    background: #F0F0F0;
    display:none;
    margin-left: 56px;
    z-index: 13;
}
#layerConfig {
    position: absolute;
    top:56px;
    width:256px;
    height:100%;
    background: #F0F0F0;
    display:none;
    margin-left: 56px;
    z-index: 13;
}
#layer_parameters {
    position: relative;
    width:256px;
    height:56px;
    background: #F0F0F0;
    margin-top: 0px;
    z-index: 14;
}

#layer_item {
    position: relative;
    background: #F0F0F0;
    z-index: 15;
}

#layerConfig_on {
    position: relative;
    width:256px;
    height:56px;
    background: #F0F0F0;
    margin-top: 0px;
    z-index: 17;
}

#layerConfig_tree {
    position: relative;
    height:100%;
    background: #F0F0F0;
    z-index: 14;
}
#layer_add {
    position: relative;
    width:112px;
    height:32px;
    /*background: #F0F0F0;*/
    z-index: 17;
    line-height: 32px;
    margin-top: 17px;
    margin-left: 16px;
    background: #1563D1;
    border-radius: 4px;
    text-align: center
}
#treeLi {
    position: relative;
    /*height:100%;*/
    background: #F0F0F0;
    z-index: 16;
    margin-top: 16px;
}
#layerConfig_content {
    position: relative;
    /*height:100%;*/
    background: #F0F0F0;
    z-index: 16;
    /*margin-top: 16px;*/
}
